<template>
	<view class="message">
		<headTop>
			<uv-navbar title="消息通告" @leftClick="leftClick" bgColor="rgba(255,255,255,.2)"></uv-navbar>
		</headTop>
		<view class="steps">
			<uv-cell-group>
				<uv-cell v-for="item in messagelist" :key="item.id" :label="item.created_at" :center="true"
					@tap="open(item)">
					<template v-slot:title>
						<uni-badge :is-dot="true" absolute="rightTop" size="mini">
							<view class="dot" v-if="!item.read"></view>
							<view class="text">{{ item.title }}</view>
						</uni-badge>
					</template>
				</uv-cell>
			</uv-cell-group>
		</view>
		<view>
			<uv-popup ref="popup" mode="bottom" closeable safeAreaInsetTop>
				<view style="max-height: 75vh; overflow: auto; padding: 0 6vw">
					<view style="text-align: center; margin-bottom: 6vw; font-weight: 600">{{ itemInfo.title }}</view>
					<view>{{ itemInfo.content }}</view>
				</view>
			</uv-popup>
		</view>
		<view v-if="isBottom">
			<uv-divider text="已经到底了"></uv-divider>
		</view>
	</view>
</template>

<script lang="ts" setup>
	import { ref } from "vue";
	import { messageApi } from "@/api/index";
	import headTop from "@/components/headTop/index.vue";

	/* -----------------------------------------------跳转上一步------------------------------- */
	const leftClick = () => {
		uni.navigateBack({
			delta: 1
		});
	};

	/* -----------------------------------------------查看详情------------------------------- */
	const popup = ref();
	const itemInfo = ref({});
	const open = async (item) => {
		itemInfo.value = await item;
		await popup.value.open();
	};

	/* -----------------------------------------------获取数据------------------------------- */
	const params = ref({
		page: 1,
		limit: 15,
		read: null
	});
	const messagelist = ref<any>([]);
	const isBottom = ref<boolean>(false);

	const getList = async () => {
		try {
			const res = await messageApi.getmessagelist(params.value);
			if (params.value.limit > res.data.list.length) {
				isBottom.value = true;
			}
			messagelist.value = [...messagelist.value, ...res.data.list];
		} catch (error) {
			uni.showToast({
				title: error.message
			});
		}
	};
	getList();

	/* -----------------------------------------------上拉加载------------------------------- */
	import { onReachBottom } from "@dcloudio/uni-app";
	onReachBottom(() => {
		if (isBottom.value) return;
		params.value.page++;
		getList();
	});
</script>

<style lang="scss">
	.message {
		.steps {
			margin-top: 2vw;

			.uv-cell-group {
				background-color: rgba(255, 255, 255, 0.6) !important;
				border-radius: 2vw !important;
			}

			.dot {
				border: 3px solid red;
				border-radius: 50%;
				display: inline-block;
				margin: 0 1vw 2vw 0;
			}

			.text {
				width: 86vw !important;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
				display: inline-block;
			}
		}
	}
</style>